<template>
	<view class="search">
		<view class="search-top">
			<view class="search-top-left" @click="ToCity()">
				<text class="city-name">{{cityName}}</text>
				<image class="down" src="../static/search/down.png"></image>
			</view>
			<view class="search-top-middle">
				<view class="search-top-middle-part">
					<view class="search-top-middle-part-icon">
						<image src="../static/search/search-grey.png" style="width: 54rpx; height: 54rpx;"></image>
					</view>
					<view class="search-top-middle-part-input">
						<input style="width: 100%; height: 100%; font-size: 28rpx;" focus placeholder="想租什么,搜一搜"
							@input="search" />
					</view>
				</view>
			</view>
			<view class="search-top-right">
				<view class="search-top-right-button" :class="{searchbtn : searchtext}" @click="Toclasslist()">
					搜索
				</view>
			</view>
		</view>
		<view class="search-history" v-show="searchhistory.length > 0">
			<view class="search-history-part">
				<view class="search-connet-part-title"
					style="justify-content: space-between; display: flex; align-items: center;">
					<text style="font-size: 24rpx;">历史搜索</text>
					<image src="../../pagesA/static/search/delete.png" mode="widthFix"
						style="width: 42rpx; height: 42rpx;" @click="deletehistory()"></image>
				</view>
				<view class="search-history-part-connet">
					<view class="search-history-part-connet-list" v-for="(item,index) in searchhistory" :key="index"
						@click="goGoodsList(item)">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="search-connet">
			<view class="search-connet-part">
				<view class="search-connet-part-title">
					<text style="font-size: 24rpx;">热门搜索</text>
				</view>
				<view class="search-connet-part-list">
					<view class="search-content-part-list-part">
						<view class="search-connet-part-list-part-list" v-for="(item,index) in SearchArry" :key="index">
							<view class="search-connet-part-list-part-list-connet" @click="hotClickHandle(item)">
								<text style="font-size: 32rpx; margin-left: 40rpx;">{{item}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				SearchArry: [],
				searchtext: '',
				searchhistory: [],
				cityName: "全国"
			}
		},
		onLoad() {
			this.getHotList();
			this.getCityName();
			this.getLocalData();
		},
		methods: {
			getCityName() {
				this.cityName = uni.getStorageSync("city") || "全国";
			},
			getLocalData() {
				uni.getStorage({
					key: 'searchhistory',
					success: (res) => {
						console.log(res.data);
						this.searchhistory = res.data
					},
				})
			},
			getHotList() {
				this.$http("GET", "Index/keywords")
					.then(res => {
						const data = res.data.data;
						this.SearchArry.push(...data)
					})
			},
			ToCity() {
				uni.navigateTo({
					url: '/pagesA/city/city'
				})
			},
			deletehistory() {
				this.searchhistory = []
				uni.setStorage({
					key: 'searchhistory',
					data: this.searchhistory
				})
			},
			search(e) {
				this.searchtext = e.detail.value
			},
			Toclasslist() {
				if (!this.searchtext.length) return;
				this.saveLocalList(this.searchtext);
				this.goGoodsList(this.searchtext)
				this.searchtext = "";
			},
			saveLocalList(title) {
				if (this.searchhistory.indexOf(title) == -1) {
					if ((this.searchhistory).length >= 6) {
						(this.searchhistory).pop()
						this.searchhistory.unshift(title)
					} else {
						(this.searchhistory).unshift(title)
					}
					uni.setStorage({
						key: 'searchhistory',
						data: this.searchhistory
					})
				}
			},
			hotClickHandle(title) {
				this.saveLocalList(title);
				this.goGoodsList(title)
			},
			goGoodsList(title) {
				uni.navigateTo({
					url: `/pagesA/productList/productList?title=${title}`,
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.city-name {
		margin-right: 10rpx;
		font-size: 28rpx;
		white-space: nowrap;
		width: 90rpx;
		overflow: hidden;
	}

	.down {
		width: 24rpx;
		height: 14rpx;
	}

	.search {
		width: 100%;
		height: 100%;
	}

	.searchbtn {
		color: white !important;
		background-color: red !important;
	}

	.search-top {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
	}

	.search-top-left {
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-middle {
		width: 60%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-middle-part {
		width: 96%;
		height: 70%;
		background-color: #f8f8f8;
		border-radius: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-middle-part-icon {
		width: 14%;
		height: 90%;
		margin-left: 2%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-middle-part-input {
		width: 80%;
		height: 90%;
	}

	.search-top-right {
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-top-right-button {
		width: 100rpx;
		height: 54rpx;
		background-color: #c1c1c1;
		color: white;
		text-align: center;
		border-radius: 26rpx;
		line-height: 54rpx;
	}

	.search-connet {
		width: 100%;
		height: 400rpx;
		display: flex;
		justify-content: center;
	}

	.search-connet-part {
		width: 96%;
		height: 100%;
	}

	.search-connet-part-title {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.search-connet-part-list {
		width: 100%;
		height: calc(100% - 60rpx);
		display: flex;
		justify-content: center;
	}

	.search-content-part-list-part {
		width: 95%;
		height: 100%;
	}

	.search-connet-part-list-part-list {
		width: 100%;
		height: 33%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.search-connet-part-list-part-list-connet {
		width: 100%;
		height: 60rpx;
		background-color: #f9f9f9;
		border-radius: 24rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.search-history {
		width: 100%;
		/* 		height: 260rpx; */
		display: flex;
		justify-content: center;
	}

	.search-history-part {
		width: 96%;
		height: 100%;
	}

	.search-history-part-connet {
		width: 100%;
		height: calc(100% - 60rpx);
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.search-history-part-connet-list {
		height: 60rpx;
		padding-left: 28rpx;
		padding-right: 28rpx;
		background-color: #f9f9f9;
		width: fit-content;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
		border-radius: 32rpx;
		color: black;
		font-size: 32rpx;
	}
</style>
